/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * =============================================================
 */

<!--
 * @Descripttion: loss
 * @version: 1.0
 * @Author: xds
 * @Date: 2020-04-24 15:23:44
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-29 00:18:45
 -->
<style lang="less" scoped>
.scalarcontainer {
  width: 100%;
  height: 100%;
  background-color: white;
}

.scalarContainerTitle,
.scalarContainerTitleLarge {
  display: flex;
  height: 30px;
  padding: 0% 2% 0 2%;
  line-height: 30px;
  color: white;
  text-align: left;
  background-color: #9fa5fa;
  border-radius: 2px;

  .scale:hover {
    cursor: pointer;
  }

  .titleRight {
    margin-right: 1%;
    margin-left: auto;
  }
}

.scalarContainerTitle {
  font-size: 11px;

  .iconfont {
    font-size: 11px;
  }
}

.scalarContainerTitleLarge {
  font-size: 16px;

  .iconfont {
    font-size: 16px;
  }
}

.el-col {
  margin-bottom: 20px;
}
</style>
<template>
  <div v-show="isshow[chartgrade]" class="scalarcontainer">
    <el-col :span="size">
      <el-card :body-style="{ padding: '0px' }" class="box-card">
        <div :class="[scaleLargeSmall ? 'scalarContainerTitleLarge' : 'scalarContainerTitle']">
          <div>
            <span class="tagShow">{{ info }}</span>
          </div>
          <div class="titleRight">
            <el-tooltip class="item" effect="dark" content="点击可放大此图表" placement="top">
              <span class="scale" @click="sizebig()"><i class="iconfont icon-fangda"/></span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="点击可缩小此图表" placement="top">
              <span class="scale" @click="sizesmall()"><i class="iconfont icon-suoxiao1"/></span>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="勾选图表参与合并，或选中后点击定制按钮会跳转到用户定制界面"
              placement="top"
            >
              <span class="scale"
                ><i
                  :class="['iconfont', chartchecked ? 'icon-xuanzhong1' : 'icon-weixuanzhong1']"
                  @click="ischecked()"
              /></span>
            </el-tooltip>
          </div>
        </div>
        <scalarchart
          :chartdata="chartdata"
          :start="start"
          :end="end"
          :ytext="ytext"
          :scaleLargeSmall="scaleLargeSmall"
          :classname="classname"
          :isaddmain="isaddmain"
          :title="id"
        />
      </el-card>
    </el-col>
  </div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex';
import { Scalarchart } from './scalarchart';

const { mapMutations: mapScalarMutations, mapGetters: mapScalarGetters } = createNamespacedHelpers(
  'Visual/scalar'
);
const { mapMutations: mapCustomMutations, mapGetters: mapCustomGetters } = createNamespacedHelpers(
  'Visual/custom'
);
const { mapGetters: mapLayoutGetters } = createNamespacedHelpers('Visual/layout');
export default {
  components: {
    Scalarchart,
  },
  props: {
    content: Object,
    subname: String,
  },
  data() {
    return {
      scaleLargeSmall: false,
      size: 8,
      ytext: '',
      thisitem: {},
      isshow: { main: true, subordinate: false, general: true, undefined: true },
      start: false,
      end: false,
      chartchecked: false,
      chartgrade: 'general',
      info: '',
      id: '',
      chartdata: { run: '', value: {} },
      classname: '',
      isaddmain: false,
    };
  },
  computed: {
    ...mapScalarGetters([
      'checkeditem',
      'startmerged',
      'endmerged',
      'mergestep',
      'checkedorder',
      'mergednumber',
      'backednumber',
      'getDownLoadArray',
      'grade',
      'mergedorder',
      'checked',
      'mergeditem',
    ]),
    ...mapCustomGetters(['getScalar']),
    ...mapLayoutGetters(['setDownloadSvgClass', 'getTimer']),
  },
  watch: {
    mergestep(val) {
      if (
        val === this.checkedorder.length &&
        val !== 0 &&
        this.mergedorder[this.classname] === this.mergednumber &&
        this.grade[this.classname] === 'main'
      ) {
        this.setdatainit();
      }
    },
    getTimer() {
      const content = this.content.value[Object.keys(this.content.value)[0]];
      this.chartdata.run = this.content.run;
      this.chartdata.value[Object.keys(this.content.value)[0]] = [];
      if (content.length > 1000) {
        const n = Math.ceil(content.length / 1000);
        for (let i = 0; i < content.length; i += n) {
          this.chartdata.value[Object.keys(this.content.value)[0]].push(content[i]);
        }
      } else {
        this.chartdata.value = this.content.value;
      }
      this.id = `${this.chartdata.run} ${Object.keys(this.chartdata.value)[0]}`;
      this.info = this.id;
      if (this.info.length > 20) {
        this.info = `${this.info.slice(0, 17)}...`;
      }
      const arr = Object.keys(this.chartdata.value)[0].split('/');
      this.ytext = arr[arr.length - 1];
      this.classname =
        this.chartdata.run.replace(/\//g, '').replace(/\./g, '') +
        Object.keys(this.chartdata.value)[0]
          .replace(/\//g, '')
          .replace(/\./g, '');
      this.thisitem.run = this.chartdata.run;
      this.thisitem.tag = Object.keys(this.chartdata.value)[0];
      this.thisitem.value = this.chartdata.value[Object.keys(this.chartdata.value)[0]];
      if (!(this.classname in this.checked)) {
        this.setchecked([this.classname, false]);
      }
      this.chartchecked = this.checked[this.classname];
      if (!(this.classname in this.grade)) {
        this.setgrade([this.classname, 'general']);
      }
      if (!(this.classname in this.mergedorder)) {
        this.setmergedorder([this.classname, 1000]);
      }
    },
    startmerged(val) {
      if (val) {
        if (this.checkedorder.indexOf(this.classname) > 0) {
          this.setgrade([this.classname, 'subordinate']);
          this.chartgrade = this.grade[this.classname];
          this.setmergedorder([this.classname, this.mergednumber]);
          this.setmergestep();
          this.setchecked([this.classname, false]);
          this.deleteScalar(this.id);
          this.chartchecked = this.checked[this.classname];
        } else if (this.classname === this.checkedorder[0]) {
          this.setgrade([this.classname, 'main']);
          this.chartgrade = this.grade[this.classname];
          this.setmergedorder([this.classname, this.mergednumber]);
          this.deleteScalar(this.id);
          this.start = val;
          this.setchecked([this.classname, false]);
          this.chartchecked = this.checked[this.classname];
        }
      }
    },
    endmerged(val) {
      if (val && this.backednumber.indexOf(this.mergedorder[this.classname]) > -1) {
        if (this.grade[this.classname] === 'main') {
          this.end = val;
          this.reducemergeditem(this.classname);
        }
        this.setgrade([this.classname, 'general']);
        this.chartgrade = this.grade[this.classname];
        this.setmergedorder([this.classname, 1000]);
        this.setchecked([this.classname, false]);
        this.chartchecked = this.checked[this.classname];
      }
    },
  },
  created() {
    const content = this.content.value[Object.keys(this.content.value)[0]];
    this.chartdata.run = this.content.run;
    this.chartdata.value[Object.keys(this.content.value)[0]] = [];
    if (content.length > 1000) {
      const n = Math.ceil(content.length / 1000);
      for (let i = 0; i < content.length; i += n) {
        this.chartdata.value[Object.keys(this.content.value)[0]].push(content[i]);
      }
    } else {
      this.chartdata.value = this.content.value;
    }
    this.id = `${this.chartdata.run} ${Object.keys(this.chartdata.value)[0]}`;
    this.info = this.id;
    if (this.info.length > 20) {
      this.info = `${this.info.slice(0, 17)}...`;
    }
    const arr = Object.keys(this.chartdata.value)[0].split('/');
    this.ytext = arr[arr.length - 1];
    this.classname =
      this.chartdata.run.replace(/\//g, '').replace(/\./g, '') +
      Object.keys(this.chartdata.value)[0]
        .replace(/\//g, '')
        .replace(/\./g, '');
    this.thisitem.run = this.chartdata.run;
    this.thisitem.tag = Object.keys(this.chartdata.value)[0];
    this.thisitem.value = this.chartdata.value[Object.keys(this.chartdata.value)[0]];
    if (!(this.classname in this.checked)) {
      this.setchecked([this.classname, false]);
    }
    this.chartchecked = this.checked[this.classname];
    if (!(this.classname in this.grade)) {
      this.setgrade([this.classname, 'general']);
    }
    if (!(this.classname in this.mergedorder)) {
      this.setmergedorder([this.classname, 1000]);
    }
  },
  mounted() {
    this.chartgrade = this.grade[this.classname];
  },
  methods: {
    ...mapScalarMutations([
      'setcheckeditem',
      'deletecheckeditem',
      'setdatainit',
      'setmergestep',
      'addcheckedorder',
      'reducecheckedorder',
      'addbackednumber',
      'reducebackednumber',
      'deleteDownLoadArray',
      'setDownLoadArray',
      'setgrade',
      'setmergedorder',
      'setchecked',
      'reducemergeditem',
    ]),
    ...mapCustomMutations(['setScalar', 'deleteScalar']),
    sizebig() {
      this.size = 24;
      this.info = this.id;
      this.scaleLargeSmall = true;
    },
    sizesmall() {
      this.size = 8;
      this.scaleLargeSmall = false;
      if (this.info.length > 20) {
        this.info = `${this.info.slice(0, 17)}...`;
      }
    },
    ischecked() {
      if (this.checked[this.classname]) {
        this.setchecked([this.classname, false]);
        this.chartchecked = this.checked[this.classname];
        this.deleteDownLoadArray(`#svg${this.classname}`);
        this.setDownloadSvgClass.scalar = this.getDownLoadArray;
        if (this.grade[this.classname] === 'general') {
          this.deleteScalar(this.id);
          this.reducecheckedorder(this.classname);
          this.deletecheckeditem([this.ytext, this.thisitem]);
        } else if (this.grade[this.classname] === 'main') {
          this.reducebackednumber(this.mergedorder[this.classname]);
          this.isaddmain = false;
        }
      } else {
        this.setchecked([this.classname, true]);
        this.chartchecked = this.checked[this.classname];
        this.start = false;
        this.end = false;
        this.setDownLoadArray(`#svg${this.classname}`);
        this.setDownloadSvgClass.scalar = this.getDownLoadArray;
        if (this.grade[this.classname] === 'general') {
          this.setScalar([this.id, this.content]);
          this.addcheckedorder(this.classname);
          this.setcheckeditem([this.ytext, this.thisitem]);
        } else if (this.grade[this.classname] === 'main') {
          this.addbackednumber(this.mergedorder[this.classname]);
          this.isaddmain = true;
        }
      }
    },
  },
};
</script>
